<template>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('申请时间') }}</a-col>
    <a-col :span="8" :order="2" class="col_item">{{ loanDetails.loanTime }}</a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('申请金额') }}</a-col>
    <a-col :span="8" :order="4" class="col_item" style="padding:0 15px">
      <a-select style="width:100%" v-model:value="loanDetails.loanAmount" :disabled="loanDetails.orderStatus !== 1" @change="changeAmount">
        <a-select-option v-for="item in amountList" :key="item" :value="item">{{ item }}</a-select-option>
      </a-select>
    </a-col>
  </a-row>
  <a-row type="flex">
    <a-col :span="4" :order="1" class="col_item">{{ $t('借款周期') }}</a-col>
    <a-col :span="8" :order="2" class="col_item" style="padding:0 15px">
      <a-select style="width:100%" v-model:value="loanDetails.loanTerm" :disabled="loanDetails.orderStatus !== 1" @change="changeTerm">
        <a-select-option v-for="item in termList" :key="item" :value="item">{{ item }}</a-select-option>
      </a-select>
    </a-col>
    <a-col :span="4" :order="3" class="col_item">{{ $t('订单状态') }}</a-col>
    <a-col :span="8" :order="4" class="col_item">{{ formatStatus(loanDetails.orderStatus) }}</a-col>
  </a-row>
</template>

<script>
import {getOrderDetails, updateOrder} from "@/api/order"
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router"
import locale from "@/locale"
import {message,Modal} from "ant-design-vue";

const termList = [
  3,
  6,
  9,
  12,
  15,
  18,
  24,
  36
]
const amountList = [
  20000,
  30000,
  50000,
  100000,
  150000,
  200000,
  300000,
  500000
]
export default {
  name: "index",
  setup() {
    const loanDetails = ref({})
    const route = useRoute()
    const {t} = locale.global
    const {loanRecordId} = route.query

    async function getDetails() {
      const res = await getOrderDetails({
        loanRecordId
      })
      if (res.code === 1) {
        loanDetails.value = res.data
      }
    }

    function formatStatus(status) {
      const statusList = [
        {key: 1, value: t('审核中')},
        {key: 2, value: t('拒绝')},
        {key: 3, value: t('待放款')},
        {key: 4, value: t('放款中')},
        {key: 5, value: t('放款失败')},
        {key: -1, value: t('已关闭')},
      ]
      const value = statusList.find(item => item.key === status)
      return value ? value.value : null
    }

    async function changeAmount(value) {
      Modal.confirm({
        title: t('提示'),
        content:  t('确认进行此操作') + '?',
        async onOk() {
          const res = await updateOrder({
            loanRecordId, loanAmount: value
          })
          if (res.code === 1) {
            message.success(t('编辑成功'))
            getDetails()
          }
        },
        onCancel() {
          getDetails()
        }
      });

    }

    async function changeTerm(value) {
      Modal.confirm({
        title: t('提示'),
        content:  t('确认进行此操作') + '?',
        async onOk() {
          const res = await updateOrder({
            loanRecordId, loanTerm: value
          })
          if (res.code === 1) {
            message.success(t('编辑成功'))
            getDetails()
          }
        },
        onCancel() {
          getDetails()
        }
      });
    }

    onMounted(() => {
      getDetails()
    })
    return {
      termList,
      amountList,
      changeAmount,
      changeTerm,
      loanDetails,
      formatStatus
    }
  }
}
</script>

<style scoped>
.col_item {
  line-height: 45px;
  border: 1px solid #eeeeee;
  text-align: center;
}

.col_item2 {
  border: 1px solid #eeeeee;
  text-align: center;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

}
</style>
